<template>
   <div >
    <el-card shadow="hover">
            <div style="margin-left: 10px;">
                
                <el-form>
                    <el-row :gutter="10">
                        <el-col :span="3">
                            <el-form-item label="呼入主叫:">
                                <el-input v-model="searchForm.primaryCall" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="呼入被叫:">
                                <el-input v-model="searchForm.primaryCalled" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="呼出主叫:">
                                <el-input v-model="searchForm.outCall" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="呼出被叫:">
                                <el-input v-model="searchForm.outCalled" />
                            </el-form-item>
                        </el-col>

                        <!-- <el-col :span="6">
                        <el-form-item label="起止时间:">
                            <el-date-picker v-model="value1" type="datetimerange" range-separator="至"
                                start-placeholder="Start date" end-placeholder="End date" />
                        </el-form-item>
                    </el-col> -->
                        <el-col :span="3">
                            <el-form-item label="">
                                <el-date-picker v-model="date" type="date" placeholder="选择日期">
                                </el-date-picker>

                            </el-form-item>
                        </el-col>

                        <el-col :span="3">
                            <el-form-item label="选择时间">
                                <!-- <el-time-select v-model="startTime" placeholder="选择时间">
                            </el-time-select> -->
                                <el-time-select placeholder="起始时间" v-model="startTime" start="08:00" end="23:00"
                                    step="00:03" @change="setTIme">
                                </el-time-select>
                                <el-time-select placeholder="结束时间" v-model="endTime" start="08:03" end="23:03"
                                    step="00:03" disabled>
                                </el-time-select>
                            </el-form-item>
                        </el-col>


                    </el-row>
                    <el-row :gutter="10">
                        <el-col :span="3">
                            <el-form-item label="绑定状态:">
                                <el-input v-model="searchForm.bindStatus" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="处理耗时:">
                                <el-select v-model="searchForm.handleConsume" placeholder="请选择">
                                    <el-option v-for="item in timeGroup" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-form-item label="绑定耗时:">
                                <el-select v-model="searchForm.bindConsume" placeholder="请选择">
                                    <el-option v-for="item in timeGroup" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="3">
                            <el-button type="primary" @click="getRecords"><el-icon>
                                    <Search />
                                </el-icon>查询</el-button>
                            <el-button type="info" @click="clearData"><el-icon>
                                    <Close />
                                </el-icon>清空</el-button>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <div>
                <el-table :data="tableData" style="width: 100%;height:60vh" stripe v-loading="loading"
                    element-loading-text="加载中..." :element-loading-spinner="svg"
                    element-loading-svg-view-box="-10, -10, 50, 50">
                    <el-table-column type="index" width="80" label="序号" align="center" />
                    <el-table-column prop="primaryCall" label="呼入主叫" width="150" :show-overflow-tooltip="true" />
                    <el-table-column prop="primaryCalled" label="呼入被叫" width="230" :show-overflow-tooltip="true" />
                    <el-table-column prop="primaryCalled_city" label="归属地" width="100" :show-overflow-tooltip="true" />
                    <el-table-column prop="outCall" label="呼出主叫" width="200" :show-overflow-tooltip="true" />
                    <el-table-column prop="outCalled" label="呼出被叫" width="200" :show-overflow-tooltip="true" />
                    <el-table-column prop="outCalled_city" label="归属地" width="100" :show-overflow-tooltip="true" />
                    <el-table-column prop="callTime" label="呼叫时间" :formatter="formatDateTime" width="170"
                        :show-overflow-tooltip="true" />
                    <el-table-column prop="bindTime" label="绑定时间" :formatter="formatDateTime" width="170"
                        :show-overflow-tooltip="true" />
                    <el-table-column prop="handleConsume" label="处理耗时" width="90" />
                    <el-table-column prop="bindConsume" label="绑定耗时" width="90" />
                    <el-table-column prop="bindStatus" label="绑定状态" :show-overflow-tooltip='true'>
                        <template #default="scope">
                            <span
                                v-if="scope.row.bindStatus == '绑定成功' || scope.row.bindStatus == '绑定ok' || scope.row.bindStatus == '绑定成功！'"
                                style="color:green">
                                {{ scope.row.bindStatus }}
                            </span>
                            <span v-else-if="scope.row.bindStatus == '系统异常'" style="color:red">
                                {{ scope.row.bindStatus }}
                            </span>
                            <span v-else style="color:rgb(230, 162, 60)">
                                {{ scope.row.bindStatus }}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="incomingIp" label="呼入IP" />
                </el-table>
            </div>
            <div style="margin-top: 20px;">
                <el-pagination style="justify-content: center;" v-model:current-page="currentPageIndex"
                    v-model:page-size="pageSize" :page-sizes="[10, 20]" :background="true"
                    layout="total, sizes, prev, pager, next, jumper" :total="total"
                    @current-change="handleCurrentChange" @size-change="handleSizeChange" />
            </div>
            </el-card>
        </div>
</template>

<script setup lang="ts">

import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { selectPage } from "@/api/bussiness/historyRecord";
import { formatDateTime } from '@/utils/index'
import {
    Search, Close
} from '@element-plus/icons-vue'
import axios from 'axios';
import { usePermissionStore } from '@/store/modules/permission'
const permissionStore = usePermissionStore()
onMounted(() => {
    getRecords()
})
const searchForm = reactive({
    primaryCall: '',
    outCall: '',
    primaryCalled: '',
    outCalled: '',
    bindStatus: '',
    handleConsume: '',
    bindConsume: ''
})
// const submitForm = reactive({
//     primaryCall: '',
//     outCall: '',
//     primaryCalled: '',
//     outCalled: '',
// })
// const ids = ref([])
// const dialogTitle = ref('')
// const multipleSelection = ref([])
const timeGroup = ref([
    { label: '>50ms', value: 50 },
    { label: '>100ms', value: 100 },
    { label: '>150ms', value: 150 },
    { label: '无限制', value: 0 },
])
const pageSize = ref(10)
const loading = ref(true)
const currentPageIndex = ref(1)
const total = ref()
const svg = `
        <path class="path" d="
          M 30 15
          L 28 17
          M 25.61 25.61
          A 15 15, 0, 0, 1, 15 30
          A 15 15, 0, 1, 1, 27.99 7.5
          L 15 15
        " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"/>`
// const startDate = new Date()
// const endDate = new Date()
const date = ref(new Date())
const startTime = ref(
    new Date(+new Date() - 180000).getHours() + ":" + (new Date(+new Date() - 180000).getMinutes())
);
const endTime = ref(new Date().getHours() + ":" + new Date().getMinutes())
// endDate.setDate(endDate.getDate() + 1)
// startDate.setMinutes(startDate.getMinutes() - 15)
// const value1 = ref([
//     startDate,
//     new Date(endDate.toLocaleDateString())
// ])
// const form = reactive({
//     gatewayID: '',
//     ip: ''

// })
const tableData = ref([])
const handleCurrentChange = (val: number) => {
    // console.log(`current page: ${val}`)
    currentPageIndex.value = val
    getRecords()
}
const handleSizeChange = (val: number) => {
    currentPageIndex.value = val
    getRecords()
}
//设置后续的时间
const setTIme = () => {
    var list = startTime.value.split(':')
    // 转换为数字,增加六分钟时间
    var list2 = list.map(Number)
    //    console.log(list2)
    var size = list2[0] * 60 + list2[1] + 6;
    var h = Math.floor(size / 60) < 10 ? '0' + Math.floor(size / 60) : Math.floor(size / 60);
    var s = size % 60 < 10 ? '0' + size % 60 : size % 60;
    // console.log(date.value + "" + startTime.value)
    endTime.value = h + ":" + s
    // console.log(endTime.value)
}
const clearData = () => {
    Object.assign(searchForm, {
        primaryCall: '',
        outCall: '',
        primaryCalled: '',
        outCalled: '',
        bindStatus: '',
        handleConsume: '',
        bindConsume: ''
    });
}
const getRecords = () => {
    loading.value = true
    var date2 = date.value.getFullYear() + "-" + (date.value.getMonth() + 1) + "-" + date.value.getDate()

    const params = {
        pageNum: currentPageIndex.value,
        pageSize: pageSize.value,
        primaryCall: searchForm.primaryCall,
        outCall: searchForm.outCall,
        primaryCalled: searchForm.primaryCalled,
        outCalled: searchForm.outCalled,
        bindStatus: searchForm.bindStatus,
        // startTime: value1.value[0],
        // endTime: value1.value[1],
        startTime: new Date(date2 + " " + startTime.value + ":00"),
        endTime: new Date(date2 + " " + endTime.value + ":00"),
        handleConsume: searchForm.handleConsume,
        bindConsume: searchForm.bindConsume,
    }
    selectPage(params).then(res => {
        if (res.code === 200) {
            loading.value = false
            tableData.value = []
            total.value = res.data.total
            //获取归属地
            // console.log(res.data.records)
            let primaryCalledlist = []
            let outCalledlist = []
            res.data.records.forEach((item: any) => {
                primaryCalledlist.push(item.primaryCalled.split('(')[0].slice(-11).slice(0, 7))
                outCalledlist.push(item.outCalled.split('(')[0].slice(-11).slice(0, 7))
            })
            // console.log(primaryCalledlist)
            // console.log(outCalledlist)

            axios.post("http://43.137.49.173:9999/api/v1/phone-number/query_city", { phone_number: primaryCalledlist }).then(res => {
                // console.log(res.data)
                tableData.value.forEach((item: any, index) => {
                    item.primaryCalled_city = res.data[index].city

                })
                console.log(tableData.value)
            })
            axios.post("http://43.137.49.173:9999/api/v1/phone-number/query_city", { phone_number: outCalledlist }).then(res => {
                // console.log(res.data)
                tableData.value.forEach((item: any, index) => {
                    item.outCalled_city = res.data[index].city

                })
                console.log(tableData.value)
            })
            //获取归属地
            tableData.value.push(...res.data.records)
        } else {
            loading.value = false
            // tableData.value = []
            ElMessage({
                message: res.message,
                type: 'warning',
            })
        }
    }).catch(e => {
        loading.value = false
        if (e.code == 'ECONNABORTED') {
            tableData.value = []
            ElMessage({
                message: '请求超时',
                type: 'warning',
            })
        }
    })

}
</script>
<style scoped>
.example-showcase .el-loading-mask {
    z-index: 9;
}
</style>